<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>个人信息</span>
      </div>
    </template>
    <el-form
      ref="formRef"
      :rules="formRules"
      :model="formData"
      label-width="110px"
    >
      <el-form-item label="用户id" prop="id">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.userId"
          disabled
        />
      </el-form-item>
      <el-form-item label="用户名" prop="name">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.name"
          :disabled="diabled"
        />
      </el-form-item>
      <el-form-item label="用户地址" prop="address">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.address"
          :disabled="diabled"
        />
      </el-form-item>
      <el-form-item label="用户年龄" prop="age">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.age"
          :disabled="diabled"
        />
      </el-form-item>
      <el-form-item label="用户简介">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.info"
          :disabled="diabled"
        />
      </el-form-item>
      <el-form-item label="用户手机号" prop="phone">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.phone"
          :disabled="diabled"
        />
      </el-form-item>
      <el-form-item v-if="diabled" label="用户注册时间">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.createTime"
          :disabled="diabled"
        />
      </el-form-item>
      <el-form-item>
        <div class="flex justify-center">
          <el-button v-if="diabled" @click="update">修 改</el-button>
          <el-button v-if="!diabled" type="primary" @click="handleSubmit">
            保 存
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { reqUserInfo, updateUserInfo } from '@/api/user/index'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'

const formData = ref({})
const diabled = ref(true)

const update = () => {
  diabled.value = false
}

const validateId = (_, value: any, callback: any) => {
  const numberRegex = /^\d+$/
  if (!value) {
    return callback(new Error('问候语id不能为空'))
  } else if (!numberRegex.test(value)) {
    return callback(new Error('请输入有效的数字'))
  } else {
    callback()
  }
}

// const formRules = reactive({
//   age: [
//     { required: true, message: '年龄不能为空', trigger: 'blur' },
//     { validator: validateId, trigger: 'blur' },
//   ],
//   phone: [
//     { required: true, message: '请输入手机号', trigger: 'blur' },
//     { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
//   ],
// })

const handleSubmit = async () => {
  const res = (await updateUserInfo(formData.value)) as any
  if (res.flag) {
    diabled.value = true
    ElMessage({ type: 'success', message: '更新成功' })
  }
}

onMounted(async () => {
  try {
    const id = await JSON.parse(localStorage.getItem('robotData') as string).id
    const res = await reqUserInfo(id)
    formData.value = {
      ...res.data,
      createTime: dayjs(res.data.createTime).format('YYYY-MM-DD HH:mm:ss'),
    }
  } catch {}
})
</script>
